<template>
	<view class="content">
		<!-- 开始填写信息 -->
		<view class="healthyRecords">
			<view class="MT48">
				<text class="title">基本信息</text>
				<text class="hint">请务必填写真实信息</text>
			</view>
			<view class="baseInfo MT32">
				<view class="item MT65">
					<text class="itemText">姓名</text>
					<!-- @input="inputName" -->
					<input type="text" class="input" placeholder="请输入真实姓名" placeholder-class="placeholderStyle" v-model="name" maxlength="7" @input="checkInputName" />
				</view>
				<view class="line MT32"></view>
				<view class="item MT65">
					<text class="itemText">性别</text>
					<view class="choice">
						<!-- 选中 -->
						<view v-if="isMan" class="choiceItem content" style="background-color: #CDDEF4;" @click="choiceSex(0)"><text style="color: #0659C7;">男</text></view>
						<!-- 未选中 -->
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;" @click="choiceSex(0)"><text style="color: #333333;">男</text></view>
						<view v-if="!isMan" class="choiceItem content" style="background-color: #CDDEF4;" @click="choiceSex(1)"><text style="color: #0659C7;">女</text></view>
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;" @click="choiceSex(1)"><text style="color: #333333;">女</text></view>
					</view>
				</view>
				<view class="line MT32"></view>
				<view class="item MT65">
					<text class="itemText">出生日期</text>
					<gpp-date-picker @onCancel="onCancel" @onConfirm="onConfirm" :startDate="startDate" :endDate="endDate" :defaultValue="pickerDate">
						<text class="birthday">{{ birthdayText }}</text>
					</gpp-date-picker>
				</view>
				<view class="line MT32"></view>
				<!-- 身高 -->
				<view class="item MT65">
					<text class="itemText">身高</text>
					<view class="itemR">
						<input type="number" class="input" v-model="height" placeholder="请填写身高" maxlength="5" placeholder-class="placeholderStyle" />
						<text>cm</text>
					</view>
				</view>
				<view class="line MT32"></view>
				<!-- 体重 -->
				<view class="item MT65 MB80">
					<text class="itemText">体重</text>
					<view class="itemR">
						<input type="number" class="input" v-model="weight" placeholder="请填写体重" maxlength="5" placeholder-class="placeholderStyle" />
						<text>kg</text>
					</view>
				</view>
			</view>
			<!-- 病史 -->
			<view class="MT48">
				<text class="title">过往病史</text>
				<text class="hint">请务必填写真实病史</text>
			</view>
			<view class="medicalHistory MT32">
				<view class="item MT65">
					<text class="itemText">中风史</text>
					<view class="choice">
						<!-- 选中 -->
						<view v-if="isStroke" class="choiceItem content" style="background-color: #CDDEF4;" @click="choiceStroke(0)"><text style="color: #0659C7;">有</text></view>
						<!-- 未选中 -->
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;" @click="choiceStroke(0)"><text style="color: #333333;">有</text></view>
						<view v-if="!isStroke" class="choiceItem content" style="background-color: #CDDEF4;" @click="choiceStroke(1)"><text style="color: #0659C7;">无</text></view>
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;" @click="choiceStroke(1)"><text style="color: #333333;">无</text></view>
					</view>
				</view>
				<view class="line MT32"></view>
				<view class="item MT65">
					<text class="itemText">高血压</text>
					<view class="choice">
						<!-- 选中 -->
						<view v-if="isHBPressure" class="choiceItem content" style="background-color: #CDDEF4;" @click="choiceHBPressure(0)">
							<text style="color: #0659C7;">有</text>
						</view>
						<!-- 未选中 -->
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;" @click="choiceHBPressure(0)"><text style="color: #333333;">有</text></view>
						<view v-if="!isHBPressure" class="choiceItem content" style="background-color: #CDDEF4;" @click="choiceHBPressure(1)">
							<text style="color: #0659C7;">无</text>
						</view>
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;" @click="choiceHBPressure(1)"><text style="color: #333333;">无</text></view>
					</view>
				</view>
				<view class="line MT32"></view>
				<view class="item MT65">
					<text class="itemText">高血糖</text>
					<view class="choice">
						<!-- 选中 -->
						<view v-if="isHyperglycemia" class="choiceItem content" style="background-color: #CDDEF4;" @click="choiceHyperglycemia(0)">
							<text style="color: #0659C7;">有</text>
						</view>
						<!-- 未选中 -->
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;" @click="choiceHyperglycemia(0)"><text style="color: #333333;">有</text></view>
						<view v-if="!isHyperglycemia" class="choiceItem content" style="background-color: #CDDEF4;" @click="choiceHyperglycemia(1)">
							<text style="color: #0659C7;">无</text>
						</view>
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;" @click="choiceHyperglycemia(1)"><text style="color: #333333;">无</text></view>
					</view>
				</view>
				<view class="line MT32"></view>
				<view class="item MT65">
					<text class="itemText">高血脂</text>
					<view class="choice">
						<!-- 选中 -->
						<view v-if="isHyperlipidemia" class="choiceItem content" style="background-color: #CDDEF4;" @click="choiceHyperlipidemia(0)">
							<text style="color: #0659C7;">有</text>
						</view>
						<!-- 未选中 -->
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;" @click="choiceHyperlipidemia(0)"><text style="color: #333333;">有</text></view>
						<view v-if="!isHyperlipidemia" class="choiceItem content" style="background-color: #CDDEF4;" @click="choiceHyperlipidemia(1)">
							<text style="color: #0659C7;">无</text>
						</view>
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;" @click="choiceHyperlipidemia(1)"><text style="color: #333333;">无</text></view>
					</view>
				</view>
				<view class="line MT32"></view>
				<view class="item MT65">
					<text class="itemText">心脏病</text>
					<view class="choice">
						<!-- 选中 -->
						<view v-if="isHeartDisease" class="choiceItem content" style="background-color: #CDDEF4;" @click="choiceHeartDisease(0)">
							<text style="color: #0659C7;">有</text>
						</view>
						<!-- 未选中 -->
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;" @click="choiceHeartDisease(0)"><text style="color: #333333;">有</text></view>
						<view v-if="!isHeartDisease" class="choiceItem content" style="background-color: #CDDEF4;" @click="choiceHeartDisease(1)">
							<text style="color: #0659C7;">无</text>
						</view>
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;" @click="choiceHeartDisease(1)"><text style="color: #333333;">无</text></view>
					</view>
				</view>
				<view class="line MT32"></view>
				<view class="item MT65 MB80">
					<text class="itemText">颈椎病</text>
					<view class="choice">
						<!-- 选中 -->
						<view v-if="isCervicalSpondylosis" class="choiceItem content" style="background-color: #CDDEF4;" @click="choiceCervicalSpondylosis(0)">
							<text style="color: #0659C7;">有</text>
						</view>
						<!-- 未选中 -->
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;" @click="choiceCervicalSpondylosis(0)"><text style="color: #333333;">有</text></view>
						<view v-if="!isCervicalSpondylosis" class="choiceItem content" style="background-color: #CDDEF4;" @click="choiceCervicalSpondylosis(1)">
							<text style="color: #0659C7;">无</text>
						</view>
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;" @click="choiceCervicalSpondylosis(1)"><text style="color: #333333;">无</text></view>
					</view>
				</view>
			</view>
			<view class="MT48">
				<text class="title">紧急联系人</text>
				<text class="hint">填写完成会有短信告知对方</text>
			</view>
			<view class="phone" style="margin-top: 44rpx;">
				<input
					class="inputPhone"
					type="text"
					placeholder="请填写紧急联系人姓名"
					maxlength="7"
					placeholder-class="phonePlaceSytle"
					v-model="emergencyContactName"
					@input="checkInputEmergencyName"
				/>
			</view>
			<view class="phone" style="margin-top: 32rpx;">
				<input class="inputPhone" type="number" placeholder="请输入紧急联系人电话" placeholder-class="phonePlaceSytle" v-model="emergencyContactTelNum" maxlength="11" />
			</view>
			<!-- button  -->
			<view class="NextStepBtn content" @click="nextStep()"><text>下一步</text></view>
		</view>
		<!-- 选择生日 -->
	</view>
</template>

<script>
import util from '../../../utils/utils.js';
import * as api from '@/api/login';
import regular from '@/api/regular';
import gppDatePicker from '../../../components/gpp-datePicker/gpp-datePicker.vue';
const app = getApp();
export default {
	data() {
		return {
			startDate: '1900-01-01',
			endDate: '',
			pickerDate: '1975-01-01',
			birthdayText: '请输入出生日期',
			telNum: '',
			name: '', //姓名
			sex: '男', //性别
			height: '', //身高
			weight: '', //体重
			age: 0, //年龄
			isMan: true, //是否是男性
			minDate: new Date(2020, 0, 1),
			maxDate: new Date(2025, 10, 1),
			currentDate: new Date(2021, 0, 17),
			isStroke: false, //是否中风
			isHBPressure: false, //是否高血压
			isHyperglycemia: false, //。。高血糖
			isHyperlipidemia: false, //。。。高血脂
			isHeartDisease: false, //..心脏病
			isCervicalSpondylosis:false, //颈椎病
			birthday: '', //生日
			emergencyContactName: '', //紧急联系人姓名
			emergencyContactTelNum: '', //紧急联系人手机号
		};
	},
	components: {
		gppDatePicker
	},
	onShow() {
		this.endDate = util.Current_date();
		this.telNum = this.$store.state.userInfo.currentUser.phone;
	},
	methods: {
		onCancel() {
			//...
		},
		onConfirm(e) {
			this.pickerDate = e.dateValue;
			this.birthdayText = e.dateValue;
			this.birthday = e.dateValue;
		},
		// 检查姓名的输入
		checkInputName: function(e) {
			var value = e.detail.value;
			if (!value || value == '') {
				return '';
			}
			const rule = /[^\u4E00-\u9FA5A-Za-z]+$/;
			this.$nextTick(function() {
				this.name = value.replace(rule, '');
			});
		},
		// 检查紧急联系人姓名的输入
		checkInputEmergencyName: function(e) {
			var value = e.detail.value;
			if (!value || value == ' ') {
				return '';
			}
			const rule = /[^\u4E00-\u9FA5A-Za-z]+$/;
			this.$nextTick(function() {
				this.emergencyContactName = value.replace(rule, '');
			});
		},
		// 选择性别
		choiceSex(flag) {
			if (flag == 0) {
				this.isMan = true;
				this.sex = '男';
			} else if (flag == 1) {
				this.isMan = false;
				this.sex = '女';
			}
		},
		//中风
		choiceStroke(flag) {
			if (flag == 0) {
				this.isStroke = true;
			} else if (flag == 1) {
				this.isStroke = false;
			}
		},
		//高血压
		choiceHBPressure(flag) {
			if (flag == 0) {
				this.isHBPressure = true;
			} else if (flag == 1) {
				this.isHBPressure = false;
			}
		},
		// 高血糖
		choiceHyperglycemia(flag) {
			if (flag == 0) {
				this.isHyperglycemia = true;
			} else if (flag == 1) {
				this.isHyperglycemia = false;
			}
		},
		// 高血脂
		choiceHyperlipidemia(flag) {
			if (flag == 0) {
				this.isHyperlipidemia = true;
			} else if (flag == 1) {
				this.isHyperlipidemia = false;
			}
		},
		// 心脏病
		choiceHeartDisease(flag) {
			if (flag == 0) {
				this.isHeartDisease = true;
			} else if (flag == 1) {
				this.isHeartDisease = false;
			}
		},
		// 颈椎病
		choiceCervicalSpondylosis(flag) {
			if (flag == 0) {
				this.isCervicalSpondylosis = true;
			} else if (flag == 1) {
				this.isCervicalSpondylosis = false;
			}
		},
		//选择生日
		choiceBirthday() {
			this.$refs.popup1.open('bottom');
		},
		// Next
		nextStep() {
			// 这里做正则约束  所有可输入区域不可为空
			if (this.name == '') {
				this.showToast('姓名不可为空!');
				return;
			} else if (regular.checkName(this.name)) {
				this.showToast('姓名只可以为汉字、字母');
				return;
			} else if (this.height == '') {
				this.showToast('身高不可为空!');
				return;
			} else if (!regular.checkHeight(this.height)) {
				this.showToast('身高不能为负数或者小数!');
				return;
			} else if (this.weight == '') {
				this.showToast('体重不可为空!');
				return;
			} else if (!regular.checkHeight(this.weight)) {
				this.showToast('体重不能为负数或者小数!');
				return;
			} else if (this.birthday == '') {
				this.showToast('生日不可为空!');
				return;
			} else if (this.emergencyContactName == '') {
				this.showToast('紧急联系人姓名不可为空!');
				return;
			}else if (regular.checkName(this.emergencyContactName)) {
				this.showToast('紧急联系人姓名只可以为汉字、字母');
				return;
			} else if (this.emergencyContactTelNum == '') {
				this.showToast('紧急联系人手机号不可为空');
				return;
			} else if (this.emergencyContactTelNum == this.telNum) {
				this.showToast('紧急联系人手机号不可与本人一样');
				return;
			} else if (!this.$regular.phoneReg.test(this.emergencyContactTelNum)) {
				this.showToast('手机号格式不正确,请重新输入');
				return;
			}
			this.commitInof();
		},
		// 消息提示框
		showToast(str) {
			this.$toast(str, { icon: 'none' });
		},
		//  提交修改后的信息
		commitInof() {
			let that = this;
			let userId = this.$store.state.userInfo.currentUser.userId;
			let phone = this.telNum;
			let data = {
				userId: userId,
				action: 'updateEiUserInfo',
				params: {
					contactPhone: that.emergencyContactTelNum,
					highBloodHyperglycemia: that.isHyperglycemia,
					weight: that.weight,
					hypertension: that.isHBPressure,
					sex: that.sex,
					heartDisease: that.isHeartDisease,
					stroke: that.isStroke,
					contactName: that.emergencyContactName,
					height: that.height,
					neckName: that.name,
					birthday: that.birthday,
					phone: phone,
					highBloodLipids: that.isHyperlipidemia
				}
			};
			api.updateEiUserInfo(data)
				.then(function(res) {
					console.log('updateUserInfo  Success', res);
					if (res.data.code == 2000) {
						that.$store.commit('userBaseInfo', data.params)
						uni.redirectTo({
							url:'/pages/login/useInstruction/useInstruction'
						})
					} else {
						that.$toast('获取用户信息失败', { icon: 'none' });
					}
				})
				.catch(function(error) {
					console.log('updateUserInfo fail', error);
				});
		},
	}
};
</script>

<style>
/* @import '@/common/uni-nvue.scss'; */
/* @import url("@/"); */
page {
	background-color: #fafafa;
}
.picker-view {
	width: 750rpx;
	height: 600rpx;
	margin-top: 20rpx;
}
.item {
	height: 50px;
	align-items: center;
	justify-content: center;
	/* text-align: center; */
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.MT60 {
	margin-top: 60rpx;
}
.MT32 {
	margin-top: 32rpx;
}
.MT48 {
	margin-top: 48rpx;
}
.MT65 {
	margin-top: 65rpx;
}
.MB80 {
	margin-bottom: 80rpx;
}
/* 填写健康档案页 */
.healthyRecords {
	margin-top: 48rpx;
	background-color: #fafafa;
}
.title {
	font-size: 44rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #333333;
}
.hint {
	margin-left: 18rpx;
	font-size: 26rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #666666;
}
.baseInfo {
	margin-top: 32rpx;
	width: 700rpx;
	border-radius: 15px;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.line {
	width: 645rpx;
	height: 1px;
	background-color: #f0f0f0;
}
.item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 610rpx;
}
.itemR {
	display: flex;
	align-items: center;
	/* background-color: #01B09A; */
	width: 250rpx;
}
.itemR text {
	font-size: 36rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #333333;
}
.itemText {
	font-size: 38rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #000000;
}
.choice {
	width: 280rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.choiceItem {
	width: 140rpx;
	height: 60rpx;
	border-radius: 15rpx;
}
.choiceItem text {
	font-size: 36rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
}
.input {
	width: 280rpx;
}
.placeholderStyle {
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #999999;
}
/* 出生日期 */
.birthday {
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #999999;
}

/* 过往病史 */
.medicalHistory {
	width: 700rpx;
	height: 940rpx;
	border-radius: 15px;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* 紧急联系人 */
.phone {
	width: 700rpx;
	height: 122rpx;
	background-color: #ffffff;
	border-radius: 15px;
	display: flex;
	align-items: center;
	position: relative;
}

.inputPhone {
	margin-left: 45rpx;
	width: 600rpx;
	height: 100%;
}

.phonePlaceSytle {
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #666666;
}
.NextStepBtn {
	margin-top: 92rpx;
	margin-bottom: 100rpx;
	background-color: #0659c7;
	border-radius: 50px;
	width: 700rpx;
	height: 100rpx;
}
.NextStepBtn text {
	font-size: 44rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #ffffff;
}
</style>
